import React, { Component } from 'react'
// 这两个组件用来定义前端路由规则,Route组件必须被Routes组件包裹
import { Routes, Route, Link, NavLink } from 'react-router-dom'
import Index from './pages/Index'
import Detail from './pages/Detail'
export default class App extends Component {
  render() {
    return (
      // 注意: 一般前端路由规则配置的代码,都写在App组件中
      <div>
        {/* Link的作用: 修改路径不发送请求,最终渲染的是a标签. 如果不写文本看不见 */}
        {/* 注意: Link组件的to属性中写目标路径,必须写/ */}
        {/* <Link to="/index">index</Link>
        <Link to="/detail">detail</Link> */}
        <NavLink
          to="/index"
          // className={({ isActive }) => {
          //   // console.log('index', args)
          //   // return的结果会赋值给className
          //   return isActive ? 'select' : ''
          // }}
          style={({ isActive }) => {
            return isActive ? { fontSize: 80, color: 'hotpink' } : {}
          }}
        >
          index
        </NavLink>
        <NavLink
          to="/detail"
          // className={({ isActive }) => {
          //   // console.log('detail', args)
          //   return isActive ? 'select' : ''
          // }}
          style={({ isActive }) => {
            return isActive ? { fontSize: 80, color: 'hotpink' } : {}
          }}
        >
          detail
        </NavLink>
        <hr />
        <Routes>
          {/* 一个Route代表一条前端路由规则 */}
          <Route path="/index" element={<Index></Index>}></Route>
          <Route path="/detail" element={<Detail></Detail>}></Route>
        </Routes>
      </div>
    )
  }
}
